<div ng-init="types=['rule', 'points', 'path'];" class="inner">

  <vde-property label="Line Type" type="select" options="types" item="mark" 
                property="propType" ng-model="mark.propType" nodrop="1" style="full"></vde-property>

  <div id="points" ng-if="mark.propType == 'points'">
    <h4>Points</h4>

    <vde-property label="X" type="field" item="mark" property="x" 
                  ng-model="mark.properties.x.value" 
                  scale="mark.properties.x.scale" 
                  field="mark.properties.x.field"
                  can-drop-style="left" style="half"></vde-property>

    <vde-property label="Y" type="field" item="mark" property="y" 
                  ng-model="mark.properties.y.value" 
                  scale="mark.properties.y.scale" 
                  field="mark.properties.y.field"
                  can-drop-style="left" style="half"></vde-property>

    <br clear="all" />

    <vde-property label="Interpolate" type="select" options="gMdl.interpolation" 
                  item="mark" property="interpolate" 
                  ng-model="mark.properties.interpolate.value" 
                  scale="mark.properties.interpolate.scale" 
                  field="mark.properties.interpolate.field"
                  can-drop-style="left" style="half"></vde-property>

    <vde-property label="Tension" type="number" item="mark" property="tension" 
                  ng-model="mark.properties.tension.value" 
                  scale="mark.properties.tension.scale" 
                  field="mark.properties.tension.field"
                  can-drop-style="left" style="half"></vde-property>
  </div>

  <div id="points" ng-if="mark.propType == 'rule'">
    <h4>X Position</h4>

    <vde-property label="Start" type="number" item="mark" property="x" 
                  ng-model="mark.properties.x.value" 
                  scale="mark.properties.x.scale" 
                  field="mark.properties.x.field"
                  can-drop-style="left" style="half"></vde-property>

    <vde-property label="End" type="number" item="mark" property="x2" 
                  ng-model="mark.properties.x2.value" 
                  scale="mark.properties.x2.scale" 
                  field="mark.properties.x2.field"
                  can-drop-style="left" style="half"></vde-property>
  </div>

  <div id="points" ng-if="mark.propType == 'rule'">
    <h4>Y Position</h4>

    <vde-property label="Start" type="number" item="mark" property="y" 
                  ng-model="mark.properties.y.value" 
                  scale="mark.properties.y.scale" 
                  field="mark.properties.y.field"
                  can-drop-style="left" style="half"></vde-property>

    <vde-property label="End" type="number" item="mark" property="y2" 
                  ng-model="mark.properties.y2.value" 
                  scale="mark.properties.y2.scale" 
                  field="mark.properties.y2.field"
                  can-drop-style="left" style="half"></vde-property>
  </div>

  <vde-property ng-if="mark.propType == 'path'" label="Path" type="field" item="mark" 
                property="path" ng-model="mark.properties.path.value" 
                field="mark.properties.path.field" can-drop-style="left" style="full"></vde-property>

  <div id="fill" ng-if="mark.propType == 'path'">
    <h4>Fill</h4>

    <vde-property label="Color" type="color" item="mark" property="fill" 
                  ng-model="mark.properties.fill.value" 
                  scale="mark.properties.fill.scale" 
                  field="mark.properties.fill.field"
                  can-drop-style="left" style="full"></vde-property>

    <vde-property label="Opacity" type="range" min="0" max="1" step="0.1" item="mark" 
                  property="fillOpacity" ng-model="mark.properties.fillOpacity.value" 
                  scale="mark.properties.fillOpacity.scale" 
                  field="mark.properties.fillOpacity.field"
                  can-drop-style="left" style="full"></vde-property>
  </div>

  <div id="stroke" ng-init="caps=['butt', 'round', 'square']">
    <h4>Stroke</h4>

    <vde-property label="Color" type="color" item="mark" property="stroke" 
                  ng-model="mark.properties.stroke.value" 
                  scale="mark.properties.stroke.scale" 
                  field="mark.properties.stroke.field"
                  can-drop-style="left" style="full"></vde-property>

    <vde-property label="Width" type="range" min="0" step="0.25" max="10" 
                  item="mark" property="strokeWidth" 
                  ng-model="mark.properties.strokeWidth.value" 
                  scale="mark.properties.strokeWidth.scale" 
                  field="mark.properties.strokeWidth.field"
                  can-drop-style="left" style="full"></vde-property>

    <vde-property label="Cap" type="select" options="caps" item="mark" 
                  property="strokeCap" ng-model="mark.properties.strokeCap.value" 
                  nodrop="1" style="full"></vde-property>
  </div>

</div>
